<template>
	<view class="page">
		<view class="swiper-box">
			<swiper class="swiper" :current="current_swiper_index" :circular="false" :vertical="false" :indicator-dots="false"
				indicator-color="#EBEEF5" indicator-active-color="#25832A" :autoplay="false" :interval="2000" :duration="500"
				previous-margin="10px" next-margin="10px" :display-multiple-items="1" @change="changeSwiper">

				<swiper-item v-for="(item,index) in vipList" :key="index">
					<view class="swiper-item">
						<view class="bg-box">
							<image :src="item.thumb" mode="" class="card-image"></image>
						</view>

						<view class="info-panel">
							<view v-if="item.next_title" class="info-box flex-between" :class="'level' + index"
								:style="{color: item.bgColor}">
								<view class="info-left">
									<!--累计积分 {{my_info.costJifen || 0}} -->
									<!--累计消费 {{my_info.costConsume || 0}} -->
									{{my_info.costConsume || 0}}/{{item.next_total || 0}}
								</view>
								<view class="info-right" v-if="item.next_title">
									购买{{item.next_total || 0}}元产品升级为{{item.next_title}}
								</view>
							</view>

							<view v-else class="info-box flex-between" :class="'level' + index" :style="{color: item.bgColor}">
								<view class="info-left">
									{{my_info.costConsume || 0}}/{{item.price || 0}}
								</view>
								<view class="info-right">
									平台最高{{item.title}}
								</view>
							</view>

							<view class="line-box">
								<view class="line-current" :style="{width: item.percent, background: item.bgColor}"
									:class="'level' + index">

								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="page-ctx">
			<view class="rich-box">
				<view class="rich-item">
					<view class="rich-title">
						{{vip_info_level.title }}
					</view>
					<view class="rich-desc">
						{{vip_info_level.description }}
					</view>
					<view class="html-box">
						<u-parse :content="vip_info_level.content" :tagStyle="richStyle"></u-parse>
					</view>
				</view>
				<!-- <view class="rich-item">
					<view class="rich-title">
						{{vip_info_tequan.title}}
					</view>
					<view class="rich-desc">
						{{vip_info_tequan.jianjie}}
					</view>
					<view class="html-box">
						<u-parse :content="vip_info_tequan.content" :tagStyle="richStyle"></u-parse>
					</view>
				</view> -->
			</view>
		</view>

		<w_bottom_safe height="120" />

	</view>
</template>
<script>
	export default {
		data() {
			return {
				vipList: [],
				current_swiper_index: 0,
				my_info: {
					cost_price: 0,
				},
				nextRule: {},
				//
				//
				//会员等级信息
				vip_info_level: {
					title: '',
					jianjie: '',
					content: '',
				},
				//会员特权信息
				vip_info_tequan: {
					title: '',
					jianjie: '',
					content: '',
				},
				//最高会员级别id
				max_level_id: '',

				//
				richStyle: {
					// 字符串的形式
					p: 'color: #000000;font-size: 12px;line-height:1.6;font-family: PingFangSC-Regular;text-align:justify;',
					span: 'color: #000000;font-size: 12px;line-height:1.6;font-family: PingFangSC-Regular;',
					img: 'vertical-align: bottom;'
				},
			}
		},
		computed: {

		},

		onLoad() {
			this.setView();
		},
		methods: {
			setView() {
				this.query_user();
				this.query_vip_content();
			},

			query_user() {
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'users_userInfo',
					},
				}).then(res => {
					let data = res.data;
					this.my_info = data;
					this.nextRule = data.nextRule || {};
					let user_current_level_id = data.level
					let user_current_cost = data.costConsume || 0; //累计消费
					// let user_current_cost = data.costJifen || 0;//累计积分
					this.vipList = data.levelRules;
					this.vipList.forEach((v, index) => {
						v.price = parseFloat(v.price);
						v.percent = user_current_cost / v.price * 100 + '%';

						let next_item = this.vipList[index + 1]
						if (next_item) {
							v.next_title = next_item.title
							v.next_total = parseFloat(next_item.price) || 0
						}
					});

					let idList = this.vipList.map(v => v.id)
					this.max_level_id = Math.max(...idList)
					this.current_swiper_index = this.vipList.findIndex(v => v.id == user_current_level_id);

					this.$log('vipList', this.vipList)
					console.log('user_current_level_id', user_current_level_id)
					console.log('current_swiper_index', this.current_swiper_index)
				})
			},

			query_vip_content() {
				//会员等级说明
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'news_detail',
						id: 96, //this.id,
					},
				}).then(res => {
					if (res.code == 200) {
						this.vip_info_level = res.data.info;
					}
				})

				//会员特权说明
				// this.$api({
				// 	url: '/service.php',
				// 	method: 'get',
				// 	data: {
				// 		action: 'news_detail',
				// 		id: 96, //this.id,
				// 	},
				// }).then(res => {
				// 	if (res.code == 200) {
				// 		this.vip_info_tequan = res.data.info;
				// 	}
				// })
			},

			//  路线
			changeSwiper(e) {
				console.log('标记点切换 change', e)
				let index = e.detail.current
			},

			// buyVip() {
			// 	console.log(this.list[this.current].id, '等级id')
			// 	this.$api({
			// 		level_id: this.list[this.current].id
			// 	}, 'money_buyLevel').then(res_pay => {
			// 		if (res_pay.code != 1) {
			// 			this.msg('支付失败');
			// 			return false;
			// 		}
			// 		this.$api(res_pay.data).then(result => {
			// 			if (result.errMsg == 'requestPayment:fail cancel' || result.errMsg == 'requestPayment:fail') {
			// 				//用户取消支付
			// 				this.msg('取消支付');
			// 				return false;
			// 			} else {
			// 				this.msg('支付成功');
			// 			}
			// 		})
			// 	})
			// }
		}
	}
</script>

<style lang="scss">
	page {
		background: #F7F7F7;
	}
</style>
<style lang="scss" scoped>
	.page {
		.page-ctx {}
	}

	.swiper-box {
		.swiper {
			height: 368rpx;

			.swiper-item {
				background: transparent;
				// box-shadow: 0rpx 6rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);

				position: relative;
				// width: 638rpx;
				height: 368rpx;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				overflow: hidden;

				.bg-box {
					position: relative;
					width: 100%;
					height: 100%;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.info-panel {
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					padding: 40rpx 32rpx;
					padding: 60rpx 54rpx;

					.info-box {
						margin-bottom: 16rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 20rpx;
						color: #A77933;

						// &.level0 {
						// 	color: #A77933;
						// }

						// &.level1 {
						// 	color: #577FAC;
						// }

						// &.level2 {
						// 	color: #8A4926;
						// }

						// &.level3 {
						// 	color: #0E62BC;
						// }

						// &.level4 {
						// 	color: #C3E8FF;
						// }

						.info-left {}

						.info-right {}
					}

					.line-box {
						width: 100%;
						height: 8rpx;
						background: #FFFFFF;
						border-radius: 4rpx 4rpx 4rpx 4rpx;
						overflow: hidden;

						.line-current {
							background: #A77933;
							height: 8rpx;


							// &.level0 {
							// 	background: #A77933;
							// }

							// &.level1 {
							// 	background: #577FAC;
							// }

							// &.level2 {
							// 	background: #8A4926;
							// }

							// &.level3 {
							// 	background: #0E62BC;
							// }

							// &.level4 {
							// 	background: #C3E8FF;
							// }
						}
					}
				}
			}
		}
	}




	.page-ctx {
		padding: 24rpx 32rpx;

		.rich-item {
			margin-bottom: 24rpx;
			padding: 32rpx 24rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
			border-radius: 16rpx 16rpx 16rpx 16rpx;

			.rich-title {
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 40rpx;
				color: #000000;
			}

			.rich-desc {
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 40rpx;
				color: #F1F8FE;
			}

			.html-box {
				margin-top: 20rpx;
			}
		}
	}
</style>